<template>
	<view class="recharge">
		<view class="charge">
			<view class="aa">
			<view class="">
				充值金额：
			</view>
			<input type="text" value="" placeholder="请输入金额" />
		</view>
		<view class="bb">
			<view class="">
				需要缴够保证金：
			</view>
			<view class="">
				0元
			</view>
		</view>
		<view class="cc">
			<view class="dd">
				<view class="img">
					<image src="../../static/logo.png" mode=""></image>
				</view>
				<view class="zhifu">
					<view class="">
						微信支付
					</view>
					<view class="" style="font-size: 24rpx;color: rgb(153,153,153);">
						快捷支付
					</view>
				</view>
			</view>
			<u-radio-group v-model="value">
				<u-radio shape="circle"></u-radio>
			</u-radio-group>
		</view>
		<view class="bottom">
			<view class="shenhe">
				确认充值
			</view>
		</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: "recharge",
		data() {
			return {
				value: "",
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.recharge {
		background: rgb(238, 238, 238);
		height: 1250rpx;
	}
	.aa {
		width: 100%;
		padding: 20rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
	}

	.bb {
		width: 100%;
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		color: rgb(153,153,153);
	}

	.cc {
		width: 100%;
		padding: 30rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
		    justify-content: space-between;
	}

	.img image {
		width: 50rpx;
		height: 50rpx;
	}

	.zhifu {
		margin-left: 10%;
	}
	.dd{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 30%;
	}
	.bottom{
		margin: 0 auto;
		width: 94%;
		margin-top: 106%;
	}
	
	.shenhe{
		width: 100%;
		height: 80rpx;
		border-radius: 20px;
		margin-bottom: 5%;
		text-align: center;
		padding-top: 12px;
		color: #FFFFFF;
		background-image: linear-gradient(to right, rgb(53,199,233) , rgb(30,141,255));
	}
</style>
